<template>
	<!-- 健身房详情页 -->
	<view class="gym">
		<!-- 页面 header 相关部分 -->
		<view class="header-box">
			<!-- 健身房轮播图 -->
			<u-swiper :list="bannerList" height="180" previousMargin="40" 
			nextMargin="40" circular :autoplay="true" radius="5" bgColor="#ffffff"></u-swiper>
		</view>
		<!--  -->
		<view class="detail">
			<text class="title">{{gymDetail.gymName}}</text>
			<view class="star">
				<u-rate :count="5" v-model="gymDetail.star"></u-rate>
				{{gymDetail.star}}分
			</view>
			<text>营业时间：{{gymDetail.businessHours}}</text>
			<view class="underline"></view> <!-- 下划线  -->
			<view class="address">地址：{{gymDetail.address}}</view>
			<text class="price">{{gymDetail.price}}</text>
		</view>
		<!-- 健身房器械列表 -->
		<view class="gym-mod">
			<text class="rtxt">健身器械</text>
			<view v-for="item in gymDetail.gymEquipments" :key="item.id">
				<navigator class="one-new" open-type="navigate" :url="'/subpages/eq/eq?id=' + item.id + '&eqName=' + item.eqName + '&url2=' + item.url + '&eqDescribe=' + item.eqDescribe"
					hover-class="none">
					<view class="left">
						<text class="title u-line-1">{{item.eqName}}</text>
						<text class="name u-line-2">{{ item.eqDescribe }}</text>
					</view>
					<!-- 健身房图片 -->
					<view class="right">
						<image class="pic" mode="aspectFill" :src="item.url" />
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gymDetail
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: -1,
				gymDetail: {},
				bannerList:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.LoadGymDetail(this.id)
		},
		methods: {
			async LoadGymDetail(id) {
				const {
					data: data
				} = await gymDetail(id)
				this.gymDetail = data
				uni.setNavigationBarTitle({
					title:data.gymName
				})
				for (let s of data.gymImages) { // 把轮播图里的url提取出来添加到bannerList
					this.bannerList.push(s.url)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gym{
		background-color: #f9f9f9;
		.header-box {
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.detail{
			background-color: #fff;
			padding: 25upx;
			.title{
				font-size: 50upx;
				font-weight: bold;
			}
			.star{
				display: flex;
				flex-direction: row;
				color: red;
			}
			.underline{
				margin-top: 5upx;
				margin-bottom: 5upx;
				border-bottom: 1px solid #ccc;
			}
			.address{
				font-weight: bold;
			}
			.price{
				
			}
		}
		.gym-mod {
			background-color: #fff;
			width: 750upx;
		
			.rtxt {
				margin: 10rpx 0 0 30rpx;
				font-weight: bold;
				color: #000;
			}
		
			.one-new {
				width: 700upx;
				height: 74px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: flex-start;
				align-content: center;
				padding-bottom: 10px;
				padding-top: 10px;
				padding-left: 25upx;
				padding-right: 25upx;
				border-bottom: 1px solid #f1f1f1;
		
				.left {
					width: 370upx;
					height: 140upx;
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: start;
					align-items: flex-start;
		
					.title {
						font-size: 30upx;
						line-height: 42upx;
						color: #001432;
						margin-top: 21upx;
					}
					.name {
						max-width: 260rpx;
						font-size: 24rpx;
						color: #777;
					}
						
				}
		
				.right {
					width: 240upx;
		
					.pic {
						width: 240upx;
						height: 120upx;
						margin-top: 20upx;
						border-radius: 6upx;
					}
				}
			}
		
		}
	}
	
</style>
